<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>滑动图标导航</title>
    <style>
      html,
      body {
        --color: #fac300;
        --icon-width: 60px;
        --text-width: 90px;
        --padding: 2.5rem;
        --duration: 0.2s;

        font-family: sans-serif;
        background-color: var(--color);
        height: 100%;
        margin: 0;
        padding: 0;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .bar {
        width: calc(var(--icon-width) + var(--text-width));
        height: calc(100% - var(--padding));
        background-color: var(--color);
        position: absolute;
        top: calc(var(--padding) * 0.5);
        left: calc(var(--padding) * 0.5);
        border-radius: var(--icon-width);
        transform: translatex(calc(var(--icon-width) * var(--active)));
        transition: transform var(--duration) ease-in-out;
      }

      ul {
        list-style: none;
        background-color: white;
        margin: 0;
        padding: var(--padding) calc(var(--padding) / 2);
        position: relative;
        padding-right: calc(var(--text-width) + var(--padding) / 2);
        box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.2);
        display: grid;
        grid-auto-flow: column;
      }

      li {
        position: relative;

        > * {
          display: flex;
          justify-content: flex-start;
          align-items: center;
          height: 0;
        }

        .icon {
          z-index: 100;
          justify-content: center;
          width: var(--icon-width);
          cursor: pointer;
          text-align: center;
          opacity: 0.3;
          transition-property: opacity, transform;
          transition-duration: var(--duration);
          transition-timing-function: ease-in-out;
        }

        .text {
          position: absolute;
          left: 0;
          top: 0;
          opacity: 0;
          width: var(--text-width);
          margin-left: var(--icon-width);
          pointer-events: none;
          transition: opacity var(--duration) ease-in-out;
          height: 100%;
          font-size: 0.9rem;
          font-weight: bold;
        }

        &[data-active] {
          .text,
          .icon {
            opacity: 1;
          }
        }
      }

      [data-active] ~ li .icon {
        transform: translatex(calc((var(--i) * 1px) + var(--text-width)));
      }
    </style>
  </head>
  <body>
    <ul>
      <div class="bar"></div>
      <li>
        <div class="icon">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="24"
            height="24"
            viewBox="0 0 24 24"
          >
            <path fill="none" d="M0 0h24v24H0V0z" />
            <path
              d="M12 5.69l5 4.5V18h-2v-6H9v6H7v-7.81l5-4.5M12 3L2 12h3v8h6v-6h2v6h6v-8h3L12 3z"
            />
          </svg>
        </div>
        <div class="text">Home</div>
      </li>
      <li>
        <div class="icon">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="24"
            height="24"
            viewBox="0 0 24 24"
          >
            <path fill="none" d="M0 0h24v24H0V0z" />
            <path
              d="M14 2H6c-1.1 0-1.99.9-1.99 2L4 20c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6zM6 20V4h7v5h5v11H6z"
            />
          </svg>
        </div>
        <div class="text">Files</div>
      </li>
      <li>
        <div class="icon">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="24"
            height="24"
            viewBox="0 0 24 24"
          >
            <path fill="none" d="M0 0h24v24H0V0z" />
            <path
              d="M12 6c1.1 0 2 .9 2 2s-.9 2-2 2-2-.9-2-2 .9-2 2-2m0 10c2.7 0 5.8 1.29 6 2H6c.23-.72 3.31-2 6-2m0-12C9.79 4 8 5.79 8 8s1.79 4 4 4 4-1.79 4-4-1.79-4-4-4zm0 10c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"
            />
          </svg>
        </div>
        <div class="text">Profile</div>
      </li>
      <li>
        <div class="icon">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="24"
            height="24"
            viewBox="0 0 24 24"
          >
            <path fill="none" d="M0 0h24v24H0V0z" />
            <path
              d="M11.99 18.54l-7.37-5.73L3 14.07l9 7 9-7-1.63-1.27zM12 16l7.36-5.73L21 9l-9-7-9 7 1.63 1.27L12 16zm0-11.47L17.74 9 12 13.47 6.26 9 12 4.53z"
            />
          </svg>
        </div>
        <div class="text">Layers</div>
      </li>
      <li>
        <div class="icon">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="24"
            height="24"
            viewBox="0 0 24 24"
          >
            <path fill="none" d="M0 0h24v24H0V0z" />
            <path
              d="M19.43 12.98c.04-.32.07-.64.07-.98 0-.34-.03-.66-.07-.98l2.11-1.65c.19-.15.24-.42.12-.64l-2-3.46c-.09-.16-.26-.25-.44-.25-.06 0-.12.01-.17.03l-2.49 1c-.52-.4-1.08-.73-1.69-.98l-.38-2.65C14.46 2.18 14.25 2 14 2h-4c-.25 0-.46.18-.49.42l-.38 2.65c-.61.25-1.17.59-1.69.98l-2.49-1c-.06-.02-.12-.03-.18-.03-.17 0-.34.09-.43.25l-2 3.46c-.13.22-.07.49.12.64l2.11 1.65c-.04.32-.07.65-.07.98 0 .33.03.66.07.98l-2.11 1.65c-.19.15-.24.42-.12.64l2 3.46c.09.16.26.25.44.25.06 0 .12-.01.17-.03l2.49-1c.52.4 1.08.73 1.69.98l.38 2.65c.03.24.24.42.49.42h4c.25 0 .46-.18.49-.42l.38-2.65c.61-.25 1.17-.59 1.69-.98l2.49 1c.06.02.12.03.18.03.17 0 .34-.09.43-.25l2-3.46c.12-.22.07-.49-.12-.64l-2.11-1.65zm-1.98-1.71c.04.31.05.52.05.73 0 .21-.02.43-.05.73l-.14 1.13.89.7 1.08.84-.7 1.21-1.27-.51-1.04-.42-.9.68c-.43.32-.84.56-1.25.73l-1.06.43-.16 1.13-.2 1.35h-1.4l-.19-1.35-.16-1.13-1.06-.43c-.43-.18-.83-.41-1.23-.71l-.91-.7-1.06.43-1.27.51-.7-1.21 1.08-.84.89-.7-.14-1.13c-.03-.31-.05-.54-.05-.74s.02-.43.05-.73l.14-1.13-.89-.7-1.08-.84.7-1.21 1.27.51 1.04.42.9-.68c.43-.32.84-.56 1.25-.73l1.06-.43.16-1.13.2-1.35h1.39l.19 1.35.16 1.13 1.06.43c.43.18.83.41 1.23.71l.91.7 1.06-.43 1.27-.51.7 1.21-1.07.85-.89.7.14 1.13zM12 8c-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4-1.79-4-4-4zm0 6c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2z"
            />
          </svg>
        </div>
        <div class="text">Settings</div>
      </li>
    </ul>
    <script>
      const root = document.documentElement;
      const items = Array.from(document.querySelectorAll("li"));
      root.style.setProperty("--active", 0);

      items.forEach((item, index) => {
        if (index === 0) item.setAttribute("data-active", true);
        item.style.setProperty("--i", index);

        item.addEventListener("click", (e) => {
          root.style.setProperty("--active", index);
          root
            .querySelectorAll("[data-active]")
            .forEach((el) => el.removeAttribute("data-active"));
          item.setAttribute("data-active", true);
        });
      });
    </script>
  </body>
</html>
